/*
* @Date: 2021/1/17
* @Author: XueChengwu <xuechengwu@erayt.com>
* @Copyright: 2015-2019 Erayt, Inc.
* @Description: If you have some questions, please contact: xuechengwu@erayt.com.
*/
import React from 'react';
import { Collapse, List  } from 'antd';
const { Panel } = Collapse;
import Icon from 'components/Icon';
import './index.scss';

export default class extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      components: [{
        group: '通用',
        childs: [{
          name: '按钮',
          component: 'Button'
        }, {
          name: '图标',
          component: 'Icon',
        }, {
          name: '排版',
          component: 'Typography'
        }]
      }, {
        group: '布局',
        childs: [{
          name: '分割线',
          component: 'Divider'
        }, {
          name: '栅格',
          component: 'Row',
        },]
      }, {
        group: '数据录入',
        childs: [{
          name: '自动完成',
          component: 'AutoComplete',
        }, {
          name: '级联选择',
          component: 'Cascader',
        }, {
          name: '多选框',
          component: 'Checkbox'
        }, {
          name: '日期选择器',
          component: 'DatePicker'
        }, {
          name: '输入框',
          component: 'Input',
        }, {
          name: '数字输入框',
          component: 'InputNumber'
        }, {
          name: '单选框',
          component: 'Radio',
        }, {
          name: '评分',
          component: 'Rate',
        }, {
          name: '选择器',
          component: 'Select',
        }, {
          name: '滑动输入条',
          component: 'Slider',
        }, {
          name: '开关',
          component: 'Switch',
        }, {
          name: '时间选择框',
          component: 'TimePicker',
        }, {
          name: '穿梭框',
          component: 'Transfer',
        }, {
          name: '树选择',
          component: 'TreeSelect',
        }, {
          name: '上传',
          component: 'Upload'
        }]
      }],
    };
  }

  componentDidMount() {
    // TODO: 后续通过文件读入
  }

  render() {
    const { components = [] } = this.state;
    return (
      <div className="components-box">
        <Collapse defaultActiveKey={components.map((vo, key) => key)}>
          {
            components.map((vo, key) => {
              return (
                <Panel header={vo.group} key={key}>
                  <List
                    itemLayout="horizontal"
                    dataSource={vo.childs}
                    renderItem={item => (
                      <List.Item>
                        <div className="draggable com-drag" data-component={item.component}><Icon type="move" className="drag" />{item.name}</div>
                      </List.Item>
                    )}
                  />
                </Panel>
              )
            })
          }
        </Collapse>
      </div>

    );
  }
}
